<template>
  <div>
    <a-table
      :columns="columns"
      :dataSource="dataSource"
      :pagination="pagination"
      @change="handleTableChange"
      bordered
      :scroll="{ x: 'max-content' }"
      rowKey="id"
      :loading="loading"
    >
      <template #title>
        <div class="table-title">
          <span>收据编号规则</span>
          <span>
            <a-button type="primary" @click="addReceipt">
              <template #icon>
                <PlusOutlined />
              </template>
              收据编号规则
            </a-button>
          </span>
        </div>
      </template>
      <template #bodyCell="{ text, record, index, column }">
        <template v-if="column.key === 'tagsBuild'">
          <span>
            <a-tag
              style="margin: 3px"
              v-for="(tag, index) of record.build_names.split(',')"
              :key="index"
            >
              {{ tag }}
            </a-tag>
          </span>
        </template>
        <template v-if="column.key === 'action'">
          <a-button type="link" @click="btnDelete(record.id)" danger
            >删除</a-button
          >
        </template>
      </template>
    </a-table>
    <!-- 添加收据 -->
    <AddReceipt :visible="visible" @success="successClose" @cancel="closable" />
  </div>
</template>

<script>
import { computed, defineComponent, ref, watch } from "vue";
import AddReceipt from "./addReceipt.vue";
import { PlusOutlined } from "@ant-design/icons-vue";
import request from "../../../../common/utils/request";
import utils from "../../../../common/utils/utils";
import { message } from "ant-design-vue";

export default defineComponent({
  name: "ruleList",
  components: { PlusOutlined, AddReceipt },
  setup() {
    const columns = [
      {
        title: "收据编号规则名称",
        dataIndex: "name",
      },
      {
        title: "收据编号前缀",
        dataIndex: "prefix",
      },
      {
        title: "开始编号",
        dataIndex: "start_number",
      },
      {
        title: "结束编号",
        dataIndex: "end_number",
      },
      {
        title: "应用楼宇",
        dataIndex: "tagsBuild",
        key: "tagsBuild",
        width: 240,
      },
      {
        title: "操作",
        dataIndex: "id",
        key: "action",
      },
    ];
    const dataSource = ref([]);

    const btnDelete = (id) => {
      utils.modalConfirm({
        content: "是否删除该收据编号？",
        okType: "danger",
        centered: true,
        onOk: () => {
          request.del("/org", "/receipt/del", { id }).then((res) => {
            message.success(res.msg || "删除成功");
            page.value =
              dataSource.value.length == 1 ? page.value - 1 : page.value;
            ruleList();
          });
        },
      });
    };

    // 添加收据
    const visible = ref(false);

    const addReceipt = () => {
      visible.value = true;
    };
    const closable = () => {
      visible.value = false;
    };
    const successClose = () => {
      closable();
      ruleList();
    };
    const page = ref(1);
    const pageSize = ref(10);
    const total = ref(0);
    const pagination = computed(() => ({
      total: total.value,
      current: page.value,
      pageSize: pageSize.value,
      showSizeChanger: true,
    }));
    const handleTableChange = (pager, filters, sorter) => {
      page.value = pager.current;
      pageSize.value = pager.pageSize;
      ruleList();
    };
    const loading = ref(false);
    const ruleList = () => {
      loading.value = true;
      request
        .get("/org", "/receipt/ruleList", {
          page: page.value,
          limit: pageSize.value,
        })
        .then((res) => {
          dataSource.value = res.list;
          total.value = res.total;
        })
        .finally(() => {
          loading.value = false;
        });
    };
    ruleList();
    return {
      columns,
      dataSource,
      visible,
      pagination,
      loading,
      btnDelete,
      addReceipt,
      closable,
      successClose,
      handleTableChange,
    };
  },
});
</script>

<style lang="less" scoped>
.table-title {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
</style>
